<template>
    <!-- app用户管理 -->
    <div class="p-2">
        <!-- 头部搜索 -->
        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave">
            <div class="mb-[10px]" v-show="showSearch">
                <el-card shadow="hover">
                    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                        <el-form-item label="用户ID" prop="id">
                            <el-input v-model.trim="queryParams.id" placeholder="请输入" clearable style="width: 200px" />
                        </el-form-item>
<!--                        <el-form-item label="手机号" prop="mobile">-->
<!--                            <el-input v-model.trim="queryParams.mobile" placeholder="请输入" clearable style="width: 200px" />-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="用户等级" prop="level" style="width: 160px">-->
<!--                            <el-select v-model="queryParams.level" placeholder="请选择" clearable >-->
<!--                                <el-option v-for="dict in options" :key="dict.value" :label="dict.label"-->
<!--                                    :value="dict.value" />-->
<!--                            </el-select>-->
<!--                        </el-form-item>-->
                        <el-form-item label="状态" prop="invalid" style="width: 130px">
                            <el-select v-model="queryParams.invalid" placeholder="请选择" clearable >
                                <el-option v-for="dict in tioseui" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>

                        <!-- 折叠面板 -->
                        <!-- <el-form-item label="创建时间" v-show="tuonsein" style="width: 308px;">
                            <el-date-picker v-model="huonetime" type="daterange" start-placeholder="开始时间"
                                end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
                                @change="tionmetin()" :default-time="defaultTime" style="max-width: 60vw" />
                        </el-form-item> -->
                        <el-form-item label="创建时间" style="width: 308px;">
                            <el-date-picker v-model="huonetime" type="daterange" start-placeholder="开始时间"
                                end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
                                @change="tionmetin()" :default-time="defaultTime" style="max-width: 60vw" />
                        </el-form-item>

                        <el-form-item v-hasPermi="['ums:user:query']">
                            <el-button type="primary" icon="Search" @click="tonseinc()">搜索</el-button>
                            <el-button icon="Refresh" @click="resetQuery()">重置</el-button>
                            <!-- 向下展开箭头 -->
                            <!-- <el-button link icon="ArrowDown" @click="tuonsein = !tuonsein"></el-button> -->
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
        </transition>

        <el-card shadow="hover">
            <template #header>
                <el-row :gutter="10" class="mb8">
                    <!-- <el-col :span="1.5">
                        <el-button type="danger" plain icon="WarnTriangleFilled" :disabled="single" @click="cuonseun()"
                            v-hasPermi="['ums:user:freeze']">冻结</el-button>
                    </el-col> -->
                    <right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true"
                        @queryTable="getList"></right-toolbar>
                </el-row>
            </template>
            <el-table :data="ordersListl" v-loading="loading" max-height="500" @selection-change="handleSelectionChange"
                border>
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column label="用户信息" align="center" width="260" v-if="columns[0].visible">
                    <template #default="scope">
                        <div class="lioneuo">
                            <div>
                                <el-row>
                                    <el-col :span="7" class="cuionseti">
                                        ID：
                                    </el-col>
                                    <el-col :span="17">
                                        {{ scope.row.id }}
                                    </el-col>
                                </el-row>
                            </div>
<!--                            <div v-if="scope.row.sn">-->
<!--                                <el-row>-->
<!--                                    <el-col :span="7" class="cuionseti">-->
<!--                                        SN：-->
<!--                                    </el-col>-->
<!--                                    <el-col :span="17">{{ scope.row.sn }}</el-col>-->
<!--                                </el-row>-->
<!--                            </div>-->
                            <div>
                                <el-row>
                                    <el-col :span="7" class="cuionseti">
                                        昵称：
                                    </el-col>
                                    <el-col :span="17">{{ scope.row.nickname }}</el-col>
                                </el-row>
                            </div>
<!--                            <div v-if="scope.row.userCode">-->
<!--                                <el-row>-->
<!--                                    <el-col :span="7" class="cuionseti">-->
<!--                                        邀请码：-->
<!--                                    </el-col>-->
<!--                                    <el-col :span="17">{{ scope.row.userCode }}</el-col>-->
<!--                                </el-row>-->
<!--                            </div>-->

<!--                            <div>-->
<!--                                <el-row>-->
<!--                                    <el-col :span="7" class="cuionseti">-->
<!--                                        手机号码：-->
<!--                                    </el-col>-->
<!--                                    <el-col :span="17">{{ scope.row.mobile }}</el-col>-->
<!--                                </el-row>-->
<!--                            </div>-->
<!--                            <div>-->
                          <!--                                <el-row>-->
                          <!--                                    <el-col :span="7" class="cuionseti">-->
                          <!--                                        用户等级：-->
                          <!--                                    </el-col>-->
                          <!--                                    <el-col :span="17">{{ scope.row.level }}</el-col>-->
                          <!--                                </el-row>-->
                          <!--                            </div>-->
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="用户等级" align="center" prop="invalid">
                  <template #default="scope">{{ scope.row.level }}</template>
                </el-table-column>

              <el-table-column label="AppId" align="center" prop="invalid">
                <template #default="scope">{{ scope.row.sn }}</template>
              </el-table-column>

                <el-table-column label="状态" align="center" prop="invalid" v-if="columns[1].visible">
                    <template #default="scope">{{ mnseuin(scope.row.invalid) }}</template>
                </el-table-column>

                <el-table-column label="用户头像" prop="avatar" align="center" min-width="120" v-if="columns[2].visible">
                    <template #default="scope">
                        <el-image style="width: 80px; height: 80px"
                            :src="scope.row.avatar "
                            :preview-src-list="[scope.row.avatar]" fit="contain" :preview-teleported="true">
                            <template #error>
                                <div></div>
                            </template>
                        </el-image>
                    </template>
                </el-table-column>

<!--                <el-table-column label="团队信息" align="center" width="250" v-if="columns[3].visible">-->
<!--                    <template #default="scope">-->
<!--                        <div class="lioneuo">-->
<!--                            <div>-->
<!--                                <el-row>-->
<!--                                    <el-col :span="7" class="cuionseti">-->
<!--                                        直推用户：-->
<!--                                    </el-col>-->
<!--                                    <el-col :span="17">-->
<!--                                        {{ scope.row.directUserId }}-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                            </div>-->

<!--                            <div>-->
<!--                                <el-row>-->
<!--                                    <el-col :span="7" class="cuionseti">-->
<!--                                        间推用户：-->
<!--                                    </el-col>-->
<!--                                    <el-col :span="17">-->
<!--                                        {{ scope.row.indirectUserId }}-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                            </div>-->
<!--                            <div>-->
<!--                                <el-row>-->
<!--                                    <el-col :span="7" class="cuionseti">-->
<!--                                        所属部门：-->
<!--                                    </el-col>-->
<!--                                    <el-col :span="17">-->
<!--                                        {{ scope.row.agentId }}-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </template>-->
<!--                </el-table-column>-->

<!--                <el-table-column label="抖音信息" align="center" width="300" v-if="columns[4].visible">-->
<!--                    <template #default="scope">-->
<!--                        <div class="lioneuo">-->
<!--                            <div v-if="scope.row.tiktokNickname">-->
<!--                                <el-row>-->
<!--                                    <el-col :span="7" class="cuionseti">-->
<!--                                        昵称：-->
<!--                                    </el-col>-->
<!--                                    <el-col :span="17">-->
<!--                                        {{ scope.row.tiktokNickname }}-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                            </div>-->
<!--                            <div v-if="scope.row.tiktokNo">-->
<!--                                <el-row>-->
<!--                                    <el-col :span="7" class="cuionseti">-->
<!--                                        抖音号：-->
<!--                                    </el-col>-->
<!--                                    <el-col :span="17">-->
<!--                                        {{ scope.row.tiktokNo }}-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                            </div>-->
<!--                            <div v-if="scope.row.tiktokFansCount">-->
<!--                                <el-row>-->
<!--                                    <el-col :span="7" class="cuionseti">-->
<!--                                        粉丝数量：-->
<!--                                    </el-col>-->
<!--                                    <el-col :span="17">-->
<!--                                        {{ scope.row.tiktokFansCount }}-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </template>-->
<!--                </el-table-column>-->

<!--                <el-table-column label="身份信息" align="center" prop="idCard" width="230" v-if="columns[5].visible">-->
<!--                    <template #default="scope">-->
<!--                        <div class="lioneuo">-->
<!--                            <div v-if="scope.row.realName">-->
<!--                                <el-row>-->
<!--                                    <el-col :span="7" class="cuionseti">-->
<!--                                        姓名：-->
<!--                                    </el-col>-->
<!--                                    <el-col :span="17">-->
<!--                                        {{ scope.row.realName }}-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                            </div>-->
<!--                            <div v-if="scope.row.idCard">-->
<!--                                <el-row>-->
<!--                                    <el-col :span="7" class="cuionseti">-->
<!--                                        身份证：-->
<!--                                    </el-col>-->
<!--                                    <el-col :span="17">-->
<!--                                        {{ scope.row.idCard }}-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </template>-->
<!--                </el-table-column>-->

<!--                <el-table-column label="银行信息" align="center" prop="bankAccount" width="260" v-if="columns[6].visible">-->
<!--                    <template #default="scope">-->
<!--                        <div class="lioneuo">-->
<!--                            <div v-if="scope.row.bankName">-->
<!--                                <el-row>-->
<!--                                    <el-col :span="7" class="cuionseti">-->
<!--                                        名称：-->
<!--                                    </el-col>-->
<!--                                    <el-col :span="17">-->
<!--                                        {{ scope.row.bankName }}-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                            </div>-->
<!--                            <div v-if="scope.row.bankAccount">-->
<!--                                <el-row>-->
<!--                                    <el-col :span="7" class="cuionseti">-->
<!--                                        卡号：-->
<!--                                    </el-col>-->
<!--                                    <el-col :span="17">-->
<!--                                        {{ scope.row.bankAccount }}-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                            </div>-->
<!--                            <div v-if="scope.row.bankMobile">-->
<!--                                <el-row>-->
<!--                                    <el-col :span="7" class="cuionseti">-->
<!--                                        手机号：-->
<!--                                    </el-col>-->
<!--                                    <el-col :span="17">-->
<!--                                        {{ scope.row.bankMobile }}-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </template>-->
<!--                </el-table-column>-->

<!--                <el-table-column label="店铺信息" align="center" width="250" v-if="columns[7].visible">-->
<!--                    <template #default="scope">-->
<!--                        <div class="lioneuo">-->
<!--                            <div v-if="scope.row.storeName">-->
<!--                                <el-row>-->
<!--                                    <el-col :span="7" class="cuionseti">-->
<!--                                        名称：-->
<!--                                    </el-col>-->
<!--                                    <el-col :span="17">-->
<!--                                        {{ scope.row.storeName }}-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                            </div>-->
<!--                            <div>-->
<!--                                <el-row>-->
<!--                                    <el-col :span="7" class="cuionseti">-->
<!--                                        审核状态：-->
<!--                                    </el-col>-->
<!--                                    <el-col :span="17">-->
<!--                                        {{ luonseuic(scope.row.storeAuditFlag) }}-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                            </div>-->
<!--                            <div v-if="scope.row.storeAuditTime">-->
<!--                                <el-row>-->
<!--                                    <el-col :span="7" class="cuionseti">-->
<!--                                        开通时间：-->
<!--                                    </el-col>-->
<!--                                    <el-col :span="17">-->
<!--                                        {{ scope.row.storeAuditTime.slice(0, -3) }}-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                            </div>-->
<!--                        </div>-->

<!--                    </template>-->
<!--                </el-table-column>-->

                <el-table-column label="会员到期时间" align="center" width="165" v-if="columns[8].visible">
                    <template #default="scope">
                        {{ scope.row.firstOrderTime.slice(0, -3) }}
                    </template>
                </el-table-column>

                <el-table-column label="创建时间" align="center" fixed="right" width="165" v-if="columns[9].visible">
                    <template #default="scope">
                        {{ scope.row.createTime.slice(0, -3) }}
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center" fixed="right" width="120">
                    <template #default="scope">
                        <!-- <el-tooltip content="详情" placement="top">
                            <el-button link type="primary" icon="Expand"></el-button>
                        </el-tooltip> -->
                        <el-tooltip content="解冻" placement="top" v-if="scope.row.invalid == 1">
                            <el-button link type="success" icon="Checked" @click="cuonseun(scope.row)"
                                v-hasPermi="['ums:user:freeze']"></el-button>
                        </el-tooltip>
                        <el-tooltip content="冻结" placement="top" v-else>
                            <el-button link type="danger" icon="WarnTriangleFilled" @click="cuonseun(scope.row)"
                                v-hasPermi="['ums:user:freeze']"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" @pagination="getList" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" />
        </el-card>
    </div>
</template>

<script setup lang="ts" name="Appusers">
import { listUser, getFreeze } from '@/api/operates/appusers/index';
import { UsersQuery, UsersVO } from '@/api/operates/appusers/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const columns = ref<FieldOption[]>([
    { key: 0, label: `用户信息`, visible: true, children: [] },
    { key: 1, label: `状态`, visible: true, children: [] },
    { key: 2, label: `用户头像`, visible: true, children: [] },
    { key: 3, label: `团队信息`, visible: true, children: [] },
    { key: 4, label: `抖音信息`, visible: true, children: [] },
    { key: 5, label: `身份信息`, visible: true, children: [] },
    { key: 6, label: `银行信息`, visible: true, children: [] },
    { key: 7, label: `店铺信息`, visible: true, children: [] },
    { key: 8, label: `首次购买订单时间`, visible: true, children: [] },
    { key: 9, label: `创建时间`, visible: true, children: [] },
])

const initFormData: UsersVO = {
    id: '',
    sn: '',
    userCode: '',
    storeName: '',
    storeAvatar: '',
    password: '',
    nickname: '',
    avatar: '',
    mobile: '',
    unionid: '',
    openid: '',
    directUserId: 0,
    indirectUserId: 0,
    agentId: 0,
    userRole: '',
    invalid: 0,
    idCard: '',
    realName: '',
    bankAccount: '',
    bankMobile: '',
    bankName: '',
    signTime: '',
    signProtocolNo: '',
    signViewUrl: '',
    storeAuditFlag: 0,
    storeAuditTime: '',
    fundPassword: '',
    level: 0,
    orderCount: 0,
    updateTime: '',
    createTime: '',
}
const data = reactive<PageData<UsersVO, UsersQuery>>({
    form: { ...initFormData },
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: '',
        mobile: '',
        level: '',
        invalid: '',
        startTime: '',
        endTime: '',
    },
    rules: {},
})
const { queryParams, form } = toRefs(data)
const tuonsein = ref(false)

/**
 * 查询的用户等级
 */
const options = [
    {
        value: '0',
        label: '0',
    },
    {
        value: '1',
        label: '1',
    },
    {
        value: '2',
        label: '2',
    },
    {
        value: '3',
        label: '3',
    }
]
/**
 * 查询状态
 */
const tioseui = [
    {
        value: '1',
        label: '冻结',
    },
    {
        value: '0',
        label: '正常',
    },
]

/**
 * 用户角色
 */
const tiomuonse = (val: string) => {
    if (val === 'MEMBER') {
        return '普通会员'
    } else if (val === 'VIP') {
        return '店主'
    }
}

/**
 * 用户状态
 */
const mnseuin = (val: string | number) => {
    if (val === 1) {
        return '冻结'
    } else if (val === 0) {
        return '正常'
    }
}

/**
 * 店铺审核状态
 */
const luonseuic = (val: string | number) => {
    if (val === 0) {
        return '未审核'
    } else if (val === 1) {
        return '审核中'
    } else if (val === 2) {
        return '审核通过'
    }
}

const ids = ref<Array<string | number>>([])
const single = ref(true)
const huonetime = ref('')
const ordersListl = ref<UsersVO[]>([]);
const total = ref(0);
const loading = ref(true)
const showSearch = ref(true)
const queryFormRef = ref<ElFormInstance>();


/**
 * 默认时间
 */
const defaultTime = ref<[Date, Date]>([
    new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59),
])

/**
 * 查询的订单时间
 */
const tionmetin = () => {
    if (huonetime.value != null) {
        // 开始时间
        queryParams.value.startTime = huonetime.value[0];
        // 结束时间
        queryParams.value.endTime = huonetime.value[1];
    } else {
        huonetime.value = '';
        queryParams.value.startTime = '';
        queryParams.value.endTime = '';
    }
}

/**
 * 查询app用户列表
 */
const getList = async () => {
    loading.value = true;
    const res = await listUser(queryParams.value);
    ordersListl.value = res.data.list;
    total.value = res.data.total;
    loading.value = false;
}

/**
 * 搜索按钮操作
 */
const tonseinc = () => {
    queryParams.value.pageNum = 1;
    getList();
}

/**
 * 重置按钮操作
 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    huonetime.value = '';
    tionmetin()
    getList();
}

/**
 * 多选框选中数据
 */
const handleSelectionChange = (selection: UsersVO[]) => {
    ids.value = selection.map((item: UsersVO) => item.id);
    single.value = selection.length != 1;
}

/**
 * 冻结和解冻按钮操作
 */
const cuonseun = async (row?: UsersVO) => {
    try {
        const Id = row?.id || ids.value[0]
        let text = row?.invalid === 1 ? "解冻" : "冻结";
        await proxy?.$modal.confirm(`是否确认${text}`);
        await getFreeze(Id);
        getList();
        proxy?.$modal.msgSuccess(text + "成功");
    } catch (error) {
    }
}


onMounted(() => {
    getList();
});
</script>

<style scoped></style>
